<template>
  <!-- 主变负载-主变运行信息图表 -->
  <div class="echa">
    <v-chart :auto-resize="true" :options="newPolar" />
  </div>
</template>
<script lang="ts">
import echarts from "echarts";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
//loadsh
import lodash from "lodash";

@Component({
  components: {},
})
export default class DutyTop extends Vue {
  @Prop({ default: () => [] })
  xAxisDataTop: Array<string> | undefined;
  @Prop({ default: () => [] })
  dataListTop: Array<any> | undefined;
  public polar: Object = {
    title: {
      text: "油温（°C）",
      textStyle: {
        align: "center",
        color: "#30ECF4",
        fontSize: 12,
        fontWeight: "lighter",
      },
      top: 30,
      right: 30,
    },
    legend: {
      // data: ["高一", "高二", "高三"],
      top: "2%",
      textStyle: {
        color: "white", //坐标的字体颜色
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(0, 255, 233,0)",
              },
              {
                offset: 0.5,
                color: "rgba(255, 255, 255,1)",
              },
              {
                offset: 1,
                color: "rgba(0, 255, 233,0)",
              },
            ],
            global: false,
          },
        },
      },
    },
    grid: {
      left: "15%",
      right: "5%",
      bottom: "10%",
      top: "16%",
      // containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLabel: {
        // interval: 0,
        // rotate: 40,
        color: "#fff",
        textStyle: {
          fontFamily: "Microsoft YaHei",
        },
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: true,
        // lineStyle: {
        //   color: "rgba(115,129,167,0.8)",
        // },
      },
      splitArea: {
        // show: true,
        color: "#f00",
        lineStyle: {
          color: "#f00",
        },
      },
      splitLine: {
        show: false,
      },
      data: ["变压器类", "电抗器类", "断路器类", "GIS类", "电容器设备类"],
    },

    yAxis: {
      type: "value",
      // min: 0,
      name: "负载率（%）",
      nameTextStyle: {
        color: "#30ECF4",
        // align: "right",
      },
      splitNumber: 4,
      axisLine: {
        show: false,
        lineStyle: {
          color: "white",
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.1)",
        },
      },
      axisLabel: {
        show: true,
        margin: 20,
        textStyle: {
          color: "#d1e6eb",
        },
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: (this as any).xAxisDataTop[0],
        type: "line",
        // smooth: true, //是否平滑
        showAllSymbol: false,
        // symbol: 'image://./static/images/guang-circle.png',
        symbol: "circle",
        symbolSize: 5,
        lineStyle: {
          normal: {
            color: "#1A6AD7",
          },
        },
        label: {
          show: false,
          position: "top",
          textStyle: {
            color: "#1A6AD7",
          },
        },
        itemStyle: {
          color: "#1A6AD7",
          borderColor: "#fff",
          borderWidth: 1,
        },
        tooltip: {
          show: false,
        },
        // areaStyle: {
        //   normal: {
        //     color: new echarts.graphic.LinearGradient(
        //       0,
        //       0,
        //       0,
        //       1,
        //       [
        //         {
        //           offset: 0,
        //           color: "rgba(26,106,215,1)",
        //         },
        //         {
        //           offset: 1,
        //           color: "rgba(26,106,215,0.3)",
        //         },
        //       ],
        //       false
        //     ),
        //     // shadowColor: "rgba(108,80,243, 0.9)",
        //     // shadowBlur: 20,
        //   },
        // },
        data: [400, 500, 500, 500, 500, 400],
      },
      {
        name: (this as any).xAxisDataTop[1],
        type: "line",
        // smooth: true, //是否平滑
        showAllSymbol: false,
        // symbol: 'image://./static/images/guang-circle.png',
        symbol: "circle",
        symbolSize: 5,
        lineStyle: {
          normal: {
            color: "#17D6E4",
          },
        },
        label: {
          show: false,
          position: "top",
          textStyle: {
            color: "#17D6E4",
          },
        },
        itemStyle: {
          color: "#17D6E4",
          borderColor: "#fff",
          borderWidth: 1,
        },
        tooltip: {
          show: false,
        },
        // areaStyle: {
        //   normal: {
        //     color: new echarts.graphic.LinearGradient(
        //       0,
        //       0,
        //       0,
        //       1,
        //       [
        //         {
        //           offset: 0,
        //           color: "rgba(23,214,228,1)",
        //         },
        //         {
        //           offset: 1,
        //           color: "rgba(31,214,229,0.3)",
        //         },
        //       ],
        //       false
        //     ),
        //     // shadowColor: "rgba(108,80,243, 0.9)",
        //     // shadowBlur: 20,
        //   },
        // },
        data: [400, 500, 500, 500, 500, 400],
      },
    ],
  };
  get newPolar() {
    let polar = lodash.cloneDeep(this.polar);
    let robotInspection = this.dataListTop;
    var ywvalue: any[] = [];
    var fzl: any[] = [];
    var xData: any[] = [];
    robotInspection.map((v: any, i: number) => {
      xData[i] = v.time;
      ywvalue[i] = v.ywvalue;
      fzl[i] = v.fzl;
    });
    (polar as any).xAxis.data = xData;
    (polar as any).series[0].data = ywvalue;
    (polar as any).series[1].data = fzl;
    return polar;
  }

  mounted() {
    // console.log(this.xAxisDataTop);
  }
}
</script>
<style lang="scss" scoped>
.echa {
  width: 100%;
  height: 100%;
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
